<<template>
   <div class="personal">
    <!-- 顶部 -->
    <router-link :to="{ path: `/editpersonal/${$route.params.id}` }">
      <div class="profile">
        <img :src="userinfo.head_img" />
        <div class="profile-center">
          <div class="name">
            <span
              class="iconfont"
              :class="[
                userinfo.gender === 1 ? 'iconxingbienan' : 'iconxingbienv',
              ]"
            ></span
            >{{ userinfo.nickname }}
          </div>
          <div class="time">{{ new Date() | dataFormat }}</div>
        </div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </router-link>
    <!-- 单元格 -->
    <EvCell title='我的关注'
            desc='关注的用户'
          ></EvCell>
    <EvCell title='我的跟帖'
            desc='跟帖/回复'></EvCell>
    <EvCell title='我的收藏'
            desc='文章/视频'
           ></EvCell>
    <EvCell title='设置'></EvCell>
    <!-- 退出按钮 -->
    <EvButton type='danger'
              style='margin-top:15px' @click.native='quitBtn'>退出</EvButton>
  </div>
</template>

<script>
import EvCell from "@/components/ev-cell.vue";
import EvButton from "@/components/ev-button.vue";
import { dataFormat } from "@/utils/ev-filter.js";
export default {
  data() {
    return {
      userinfo: {},
    };
  },
  methods: {
    quitBtn() {
      this.$router.push("/login");
    },
  },
  components: {
    EvCell,
    EvButton,
  },
  filters: {
    dataFormat,
  },
};
</script>
<style lang="less" scoped>
.personal {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}
a {
  color: #666;
}
.profile {
  display: flex;
  padding: 20px 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px #ddd solid;

  img {
    width: (70 / 360 * 100vw);
    height: (70 / 360 * 100vw);
    border-radius: 50%;
  }

  .profile-center {
    flex: 1;
    padding: 0 10px;
  }

  .name {
    span {
      color: #75b9eb;
    }
  }

  .time {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
  }
}
</style>